<template>
  <div>
    <table class="tb">
      <thead>
        <tr>
          <th v-for="col of columns">{{ col.name }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item of list">
          <td v-for="col of columns">{{ item[col.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({
        list: [],
        columns: []
      })
    }
  },
  computed: {
    columns: content => content.data.columns,
    list: content => content.data.list
  }
}
</script>

<style scoped>
.tb {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  color: #666;
  th {
    border: 1px solid #dfe6ec;
    padding: 10px 0;
  }
  td {
    border: 1px solid #dfe6ec;
    padding: 10px 0;
    text-align: center;
  }
  thead {
    td {
    }
  }
}
</style>
